<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box">
          <div slot="header" class="clearfix">
            <span>系统使用指引</span>
            <el-button style="float: right; padding: 3px 0; font-size: 12px" type="text">系统版本：{{ version }}</el-button>
          </div>

          <div class="step-box">
            <div class="step-title">欢迎使用外来人员考试系统</div>
            <div class="step-desc">本系统用于管理外来人员入厂前的信息登记与安全考试，合格后生成入厂二维码。</div>

            <el-steps direction="vertical" :space="100" :active="5">
              <el-step title="第一步：注册并登录系统" description="外来人员使用手机号注册账号并登录系统。"></el-step>
              <el-step title="第二步：申请考试" description="进入“申请考试”模块，录入身份证、手机号、进出时间等信息并提交。"></el-step>
              <el-step title="第三步：等待管理员审批" description="管理员在后台审批，审批通过后才能进行考试。"></el-step>
              <el-step title="第四步：进入考试模块" description="审批通过后，进入“在线考试”模块参加安全知识考试。"></el-step>
              <el-step title="第五步：生成二维码" description="当考试通过后，进入“我的成绩”模块选择二维码可打印用于入厂扫码。"></el-step>
            </el-steps>

            <div class="tip">
              <el-alert
                title="温馨提示：考试不合格（低于80%）可重复答题，直到合格为止。"
                type="warning"
                show-icon
                :closable="false"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import config from '../../../package.json'

export default {
  name: 'Dashboard',
  data() {
    return {
      version: config.version
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'siteData'
    ])
  }
}
</script>

<style scoped>
.box {
  font-size: 14px;
  line-height: 28px;
  min-height: calc(100vh - 120px);
}
.step-box {
  padding: 20px;
}
.step-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}
.step-desc {
  font-size: 16px;
  margin-bottom: 30px;
  color: #666;
}
.tip {
  margin-top: 40px;
}
</style>
